<template>

  <div class="shop" v-loading='loading'>
    <div class="header">
      <div>店铺信息:{{ shopName }} | {{ shopMobile }}</div>
      <div>
        <FormSearch ref="formSearch" :forms="searchForm" @handleSearch="handleSearch" @handleReset="handleReset" />
      </div>
    </div>
    <el-table class="table-box" :data="tableData" style="width:100%" height="710" :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column prop="uid" label="会员ID" />
      <el-table-column prop="nickName" label="会员昵称" />
      <el-table-column prop="realname" label="姓名" />
      <el-table-column label="用户账号" prop="mobile" />
      <el-table-column label="性别" prop="sexText" />
      <el-table-column label="生日" prop="birth" />
      <el-table-column label="会员状态" prop="statusText" />
      <el-table-column label="本店消费次数" prop="orderNum" />
      <el-table-column label="加入会员时间" prop="useEndTime" />
      <el-table-column label="操作" fixed="right" width="340">
        <template slot-scope="scope">
          <el-button size="mini" @click="openHbDialog(scope.row)">红包余额</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24">
      <div class="pagination">
        <el-pagination background @size-change="handleSizeChange" @current-change="pageChange" :current-page="page"
          :page-size="size" :page-sizes="[20]" layout="total, sizes, prev, pager, next, jumper"
          :total="total"></el-pagination>
      </div>
    </el-col>
    <HbDialog ref="hbDialog" :tableData="hbTableData" :total="hbTotal" :balance="balance"
      @hbPageChange="hbPageChange" />
  </div>
</template>

<script>
import HbDialog from '../shopFanList/components/hbDialog'
import FormSearch from '@/components/FormSearch'
// import { getShopMember, getConsume } from '@/api/shopList'
import {
  shopVipRelationPageSizeList,
  shopVipRelationUpdate,
  shopVipRelationGenerateCode,
  shopVipRelationAdd,
  shopVipRelationDetail,
  shopVipRelationDeleteShopVip,
  shopVipRelationDeleteShop,
  shopVipRelationPageSizeShopDetail,
  shopVipRelationRedpacketList,
  shopMallOrderlist,
  detailShopPersonVip,
  getConsume, getTotalMoneyByUid
} from '@/api/store'
export default {
  components: {
    HbDialog,
    FormSearch
  },
  data() {
    return {
      loading: false,
      total: 0,
      hbTotal: 0,
      createTime: [],
      tableData: [],
      form: {},
      balance: 0,
      hbquery: {
        pageNum: 1,
        pageSize: 20,
        uid: 0
      },
      searchForm: {
        form: [
          {
            type: 'select',
            key: 'status',
            placeholder: '请选择会员状态',
            options: [
              {
                label: '正常',
                value: '1'
              },
              {
                label: '已过期',
                value: '2'
              }
            ]
          },
          {
            type: 'input',
            key: 'mobile',
            placeholder: '用户账号'
          }
        ]
      },
      query: {
        pageNum: 1,
        pageSize: 20,
        partnerId: sessionStorage.getItem('partnerId'),
        sellerId: this.$route.query.shopId
      },
      page: 1,
      size: 20,
      hbTableData: [],
      shopId: '',
      shopName: '',
      shopMobile: '13800001234'
    };
  },
  mounted() {
    this.shopId = this.$route.query.shopId
    this.shopName = this.$route.query.shopName
    this.shopMobile = this.$route.query.mobile
    const params = {
      page: 1
    }
    this.getData(params)
  },
  methods: {
    getData(params) {
      this.loading = true

      detailShopPersonVip(this.query).then(res => {
        if (res.code === 200) {
          this.loading = false
          // res.data.list.data.map(item => {
          //   if (item.birth) {
          //     item.birth = this.$moment(item.birth).format('yyyy-MM-DD')
          //   }
          // })
          this.tableData = res.data.list
          this.total = res.data.total
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handleSizeChange() {
    },
    pageChange() {
    },
    handleSearch(formValue) {
      this.form = formValue
      const params = {
        page: 1,
        ...formValue
      }
      console.log(params)
      this.getData(params)
    },
    handleReset() {
      this.form = {}
      this.page = 1
      const params = {
        page: 1
      }
      this.getData(params)
    },
    // 获取红包信息
    getHbInfo(params) {
      getConsume(this.hbquery).then(res => {
        if (res.code === 200) {
          console.log(res)
          // this.hbTableData = res.data.data.map(item => {
          //     item.money_tlj = item.type === 0 ? '+' + item.money_tlj : '-' + item.money_tlj
          //     return item
          // })
          this.hbTableData = res.data.list
          this.hbTotal = res.data.total
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getHbBanlance() {

    },
    hbPageChange(page) {
      this.hbquery.pageNum = page
      // const params = {
      //   page: page,
      //   size: 20,
      //   uid: this.uid
      // }
      // this.query.page
      this.getHbInfo()
    },
    getTotalMoneyByUid() {
      let data = {
        uid: this.uid
      }
      getTotalMoneyByUid(data).then(res => {
        this.balance = res.data
        // console.log(this.hbTotal,res.data)
      })
    },    // 打开红包余额弹窗
    openHbDialog(row) {
      this.uid = row.uid
      this.hbquery.uid = row.uid
      // this.balance = row.balance_red_packet
      // this.query.pageNum = 1
      this.hbquery.pageNum = 1
      this.getHbInfo()
      this.getTotalMoneyByUid()
      this.$refs.hbDialog.show()

    },
    goShopMember(mobile) {
      this.$router.push({
        name: 'home_hbExchangeProfit',
        params: { mobile: mobile }
      })
    },
    goTaokeOrder(mobile) {
      this.$router.push({
        name: 'home_taokeCPSOrderProfit',
        params: {
          mobile
        }
      })
    },
    tc() {
      return 'text-align:center; color:#333333; font-size:12px;'
    },
    tccolor() {
      return 'text-align:center;background-color:#f5f5f5; font-size:14px;'
    }
  }
};
</script>

<style lang="scss" scoped>
.shop {
  position: relative;
  background-color: #fff;
  height: 100%;
  padding: 0 20px;
  box-sizing: border-box;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .table-box {
    height: calc(100vh - 220px);
  }

  .pagination {
    position: absolute;
    bottom: 15px;
    right: 20px;
    z-index: 99;
  }
}
</style>
